<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    width="70%"
    @close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <div class="form-block">
        <div class="form-block-title">基本信息</div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备名称" prop="name">
              <el-input
                v-model.trim="form.name"
                placeholder="请输入设备名称"
                class="input-width"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="设备类型" prop="type">
              <el-select
                v-model="form.type"
                placeholder="选择设备类型"
                class="input-width"
              >
                <el-option
                  v-for="dict in dict.type.biz_device_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购成本" prop="purchaseCost">
              <el-input
                v-model.number="form.purchaseCost"
                placeholder="请输入设备采购成本"
                class="input-width"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属基地" prop="productionBaseId">
              <el-select
                v-model="form.productionBaseId"
                placeholder="选择所属基地"
                class="input-width"
                @change="handleBaseChange"
              >
                <el-option
                  v-for="item in baseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="!params.fromBase">
            <el-form-item label="所属塘口" prop="culturePondId">
              <el-select
                v-model="form.culturePondId"
                placeholder="选择所属塘口"
                class="input-width"
                :disabled="!form.productionBaseId"
              >
                <el-option
                  v-for="item in pondList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投运日期" prop="useDate">
              <el-date-picker
                v-model="form.useDate"
                type="date"
                placeholder="选择投运日期"
                value-format="yyyy-MM-dd"
                class="input-width"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input
                v-model="form.remarks"
                type="textarea"
                placeholder="请输入备注信息"
                class="input-width"
                :autosize="{ minRows: 1, maxRows: 6 }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="相关照片">
            <ImageUpload v-model="form.fileUrls"></ImageUpload>
          </el-form-item>
        </el-row>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { list as pondList } from "@/api/production/pond";
import { list as baseList } from "@/api/production/base";
import { detail, add, update } from "@/api/production/equipment";
import ImageUpload from "@/components/ImageUpload";
export default {
  name: "production-pond_add",
  dicts: ["biz_device_type"],
  components: { ImageUpload },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      pondList: [], // 塘口列表
      baseList: [], // 基地列表
      queryParams: { id: undefined },
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "设备编号不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "设备类型不能为空", trigger: "change" },
        ],
        productionBaseId: [
          { required: true, message: "所属基地不能为空", trigger: "change" },
        ],
        purchaseCost: [
          { required: true, message: "采购成本不能为空", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.open = val;
        if (val && this.params.type == "edit") {
          this.queryParams.id = this.params.id;
          this.getDetail();
          this.getPondList();
        }
        if (val) {
          this.getBaseList();
          this.title = this.params.title;
          if (this.params.baseId) {
            this.form.productionBaseId = this.params.baseId;
            this.handleBaseChange(this.form.productionBaseId);
          }
          if (this.params.pondId) this.form.culturePondId = this.params.pondId;
        }
      },
    },
  },
  methods: {
    /** 基地选择 */
    handleBaseChange(val) {
      if (val) {
        this.getPondList();
      } else {
        this.form.productionBaseId = undefined;
      }
    },
    /** 获取塘口数据 */
    getPondList() {
      pondList({
        productionBaseId: this.form.productionBaseId,
        pageSize: 100,
      }).then((res) => {
        this.pondList = res.rows;
      });
    },
    /** 获取基地数据 */
    getBaseList() {
      baseList({ pageSize: 100 }).then((res) => {
        this.baseList = res.rows;
      });
    },
    getDetail() {
      detail(this.queryParams).then((res) => {
        this.form = res.data;
      });
    },
    /** 提交按钮 */
    handleSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            update(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("success");
              if (this.params.autoClose) this.handleClose();
            });
          } else {
            add(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("success");
              this.handleClose();
            });
          }
        }
      });
    },
    // 取消按钮
    handleClose() {
      this.$emit("update:visible", false);
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">
.relevance-card {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-around;
  & > li {
    width: 24%;
    height: 120px;
    float: left;
    margin-right: calc(4% / 3);
    margin-bottom: calc(4% / 3);
    border-radius: 3px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 0 3px 0 rgba($color: #000000, $alpha: 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &:nth-child(4n) {
      margin-right: 0;
    }
    &:nth-last-child(-n + 4) {
      margin-bottom: 0;
    }
    .relevance-card-content {
      width: 100%;
      display: flex;

      & > img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
        flex-shrink: 0;
      }
    }
    .relevance-card-footer {
      width: 100%;
      // height: 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .first {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 46px;
    font-weight: 600;
    color: #eee;
    cursor: pointer;
  }
}
</style>